<template>
    <div id="app">
      <!-- <aaa/> -->
      <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
      <!-- <stutend ref="stuRef"/>
      <h1 ref="newRef" class="box1" style="color:red;" title="我是title">{{msg}}</h1>
      <h2 ref="newRefs" style="color:pink;">{{msgs}}</h2>
      <button @click="func1()">点击获取元素的ref</button> -->
      <!-- <hr>
      <MyDay01 name="张三" :age="ages"/>
      <MyDay02/> -->
      <!-- ---------自定义事件---------- -->
      <!-- <MyDay03 @wq="sum" @click="show" ref="demo" age="小明"/> -->
      <!-- ---------------- -->
      <!-- native修饰符,添加后可以触发原生的事件，没有添加native默认为自定义事件 -->
      <!-- <MyDay04 @wq="sum" @click.native="myFun" ref="demo"/>
      <h1>{{dataName}}</h1> -->
      <!-- -------全局事件总线--------- -->
      <MyDay05/>
      <MyDay06/>
  
    </div>
  </template>
  
  <script>
  // import HelloWorld from './components/HelloWorld.vue'
  // import HelloW from './components/SchoolName.vue'
  // import stutend from './components/stutend.vue'
  // import MyDay01 from './components/day01.vue'
  // import MyDay02 from './components/day02.vue'
  // import MyDay03 from './components/day03.vue'
  // import MyDay04 from './components/day04.vue'
  import MyDay05 from './components/day05.vue'
  import MyDay06 from './components/day06.vue'
  
  
  
  
  // 组件规则
  // 1.向外暴露的名称需要使用驼峰命名(推荐使用)，使用-连接
  // 2.导入组件时，取的名称最好暴露的名称一致，名称可以任意定义(不推荐)
  // 3.但凡注册了组件，必须使用组件
  
  export default {
    name: 'App',
    components: {
      // HelloWorld,
      // "aaa":HelloW,
      // stutend,
      // MyDay01,
      // MyDay02,
      // MyDay03,
      // MyDay04,
      MyDay05,
      MyDay06,
    },
    data() {
      return {
        // msg:"我是测试的元素111111111",
        // msgs:"我是测试的元素22222222"
        // ages:20,
        // dataName:"",
      }
    },
    methods: {
      // 第一种方式绑定自定义事件
      // sum(a){
      //   // console.log(this);
      //   console.log(11111111111);
      //   console.log(a);
      // },
      // 第二种方式绑定自定义事件
      // func2(a){
      //   console.log(22222222222222);
      //   console.log(a);
      // },
      // myFun(a){
      //   console.log(this);
      //   console.log(4444444444);
      //   console.log(a);
      // }
      // func1(){
      //   console.log(this.$refs);
      //   // 1.给元素设置ref，获取的是Dom
      //   // console.log(this.$refs.newRef.style.color);
      //   // console.log(this.$refs.newRef.className);
      //   // console.log(this.$refs.newRef.title);
      //   // 给组件设置ref，获取的是vc
      //   console.log(this.$refs.stuRef.userName);
      // }
    },
    // 挂载后
    mounted() {
       // 第二种方式绑定自定义事件,写入在methods
      // this.$refs.demo.$on("zpj",this.func2);
      // // 写函数形式，需要使用箭头函数，this指向自身
      // this.$refs.demo.$on("ch",(a)=>{
      //   console.log(this);
      //   console.log(33333333333);
      //   console.log(a);
      // });
      // 绑定自定义事件后只触发一次
      // this.$refs.demo.$once("zml",(a)=>{
      //   console.log(6666666666);
      //   console.log(a);
      //   this.dataName = a;
      // })
      // console.log(11111111111);
      // console.log(stutend);
      // this.$refs.demo.$on("zpj",this.num);
      // console.log(this.$refs.demo.$on("zpj",num));
    },
  }
  </script>
  
  <style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  </style>
  